import {
  Form,
  Input,
  Button,
} from 'antd';

import React from 'react';

import { connect, DispatchProp } from 'dva';

import styles from './styles.less';

type IProps = DispatchProp & { loading: boolean; }

class Login extends React.PureComponent<IProps> {

  private onSubmit = (form: any) => {
    this.props.dispatch({
      type: 'user/login',
      payload: form
    })
  };

  render() {
    const { loading } = this.props;
    return (
      <div className={styles.container}>
        <Form
          size="large"
          onFinish={this.onSubmit}
          className={styles.login_form}
        >
          <p className={styles.title}>
            用户登录
          </p>
          <Form.Item
            name="username"
            rules={[{
              required: true,
              message: '请输入用户名',
            }]}
          >
            <Input placeholder="用户名" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{
              required: true,
              message: '请输入密码',
            }]}
          >
            <Input placeholder="密码" type="password" />
          </Form.Item>
          <Form.Item>
            <Button
              block={true}
              type="primary"
              loading={loading}
              htmlType="submit"
              children={loading ? '登录中' : '登录'}
            />
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default connect(({ loading }:any) => {
  return { loading: loading.effects['user/login'] };
})(Login);
